<template>
  <div class="logincom">
    <div class="tou">
        <form @submit.prevent="btn1()">
            <header>
            
            <h3>登录界面</h3>
            账号：<input type="text" placeholder="手机号、邮箱登录" v-model.lazy.trim="username">
            <br>
            密码：<input type="password" placeholder="登录密码" v-model.lazy.trim="pwd">
        </header>
        <main>
            <input type="checkbox" v-model="isRem"/>
            <span>记住密码</span>
        </main>
        <footer>
            <input type="submit" value="登录">
        </footer>            
        </form>
        
        
    </div>
    
  </div>
</template>

<!--脚本--> 
<script>
export default {
    name : "LoginCom",
    // 存储组件的数据
    data(){
        return{
            username :'', //用v-model将输入框的value值直接赋值给username变量
            pwd:'',
            isRem : false, // false：默认不勾选
        }
    },
    // methods对象，存储事件函数
    methods :{
        //登录函数
        btn1(){
            const user = [
                {username : 'admin1' , pwd : 123456},
                {username : 'admin2' , pwd : 456546},
                {username : 'admin3' , pwd : 123123},
                {username : 'admin4' , pwd : 456456},
            ];
            // user.forEach(item =>{
            //     if(this.username==item.username){
            //         if(this.pwd==item.pwd){
            //             alert('登录成功'); 
            //             sessionStorage.setItem("islogin",'true');
            //             this.$router.push('/home');
            //             return;
            //         }else{
            //             alert('密码错误');
            //         }
            //     }
            // })
            let result = user.filter(item =>{
                return item.username == this.username && item.pwd == this.pwd
            });
            console.log(result);
            
            if (result.length > 0){
                
                alert('账号密码错误')
            }else{
                alert('登录成功');
                this.$router.push('/home');
                sessionStorage.setItem("islogin",'true');
            }
        }
    }
}
</script>

<!--样式-->
<style scoped>
.logincom{
    width: 100%;
    height: 98vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-self: center;
    
}
.tou{
    width: 400px;
    height: 200px;
    background-color: #7d99b1;
    margin: auto;
}
header{
    text-align: center;
}
main{
    margin-left: 60px;
}
h3{
    text-align: center;
}
footer{
    text-align: center;
}
footer input{
    width: 280px;
    height: 30px;
    margin-top: 10px;
    background-color: #5bd5e6;
    border: none;
    border-radius: 3px;
    color: white;
}
header input{
    width: 230px;
    height: 25px;
    margin-top: 10px;
    border-radius: 3px;
    border: none;
    
}
main{
    margin-top: 10px;
}
</style>